<template>
  <div class="login_bc">
    <div v-if="!changeSuccess" class="logo-form">
      <div class="form-item login_input">
        <div class="shadow-c">
          <div class="left ipt-img">
            <img src="../../../static/image/e_2.png" alt="">
          </div>
          <div class="ipt-box">
            <input type="text" v-model="mobile" placeholder="请输入手机号"/>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="form-item">
        <div @click="getCode" :class="hasSend? 'has-send' : ''" class="right shadow-c get-code">
          {{ codeText }}
        </div>
        <div class="shadow-c auth-code">
          <div class="left ipt-img">
            <img src="../../../static/image/e_8.png" alt="">
          </div>
          <div class="ipt-box">
            <input type="text" v-model="code" placeholder="请输入验证码"/>
          </div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="form-item login_input">
        <div class="shadow-c">
          <div class="left ipt-img">
            <img src="../../../static/image/e_3.png" alt="">
          </div>
          <div class="ipt-box">
            <input type="password" v-model="setPass" placeholder="设置新密码 6-16位"/>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="form-item login_input">
        <div class="shadow-c">
          <div class="left ipt-img">
            <img src="../../../static/image/e_4.png" alt="">
          </div>
          <div class="ipt-box">
            <input type="password" v-model="aginPass" placeholder="确认密码"/>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div @click="sureChange" class="form-item logo-btn">
        确认修改
      </div>
    </div>
    <div v-else class="change-success">
      <div>
        <img src="../../../static/image/e_0.png">
      </div>
      <div class="congratulations">
        恭喜您，修改密码成功!
      </div>
      <div>
        <a @click="toLogin" href="javascript: void(0)" class="go-logo">
          去登录
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LoginByPass',
    data () {
      return {
        codeText: '获取验证码',
        hasSend: false,
        lookAgreement: false,
        changeSuccess: false,
        mobile: '',
        code: '',
        setPass: '',
        aginPass: ''
      }
    },
    methods: {
      // 获取验证码
      getCode: function () {
        let that = this
        let mobile = that.mobile
        if (mobile === '') {
          that.$vux.toast.show({
            text: '请输入手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.isMobile(mobile)) {
          that.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (that.hasSend) {
          return false
        }
        that.$chaos.ajax({
          loading: '正在发送',
          url: '/Index/sendLoginCode',
          data: {
            mobile: mobile
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.codeText = '60s后重发'
              that.hasSend = true
              let timer = 60
              let text = '已发送'
              let intval = setInterval(function () {
                timer--
                if (timer <= 0) {
                  that.codeText = '重新发送'
                  that.hasSend = false
                  clearInterval(intval)
                } else {
                  if (timer < 10) {
                    text = '已发送0'
                  }
                  that.codeText = text + timer
                }
              }, 1000)
            }
          }
        })
      },

      // 修改密码
      sureChange: function () {
        let that = this
        let code = that.code
        let mobile = that.mobile
        let setPass = that.setPass
        let aginPass = that.aginPass
        if (mobile === '') {
          that.$vux.toast.show({
            text: '请输入手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.isMobile(mobile)) {
          that.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (code === '') {
          that.$vux.toast.show({
            text: '请输入验证码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (setPass === '') {
          that.$vux.toast.show({
            text: '请输入密码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (setPass.length < 6 || setPass.length > 16) {
          that.$vux.toast.show({
            text: '密码要求6-16位',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (aginPass !== setPass) {
          that.$vux.toast.show({
            text: '两次输入的密码不一致',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        that.$chaos.ajax({
          loading: '修改中...',
          url: '/Index/resetPass',
          data: {
            mobile: mobile,
            code: code,
            pass: setPass,
            pass_bak: aginPass
          },
          callback: function (type) {
            if (type === 'success') {
              that.changeSuccess = true
            }
          }
        })
      },

      // 去登陆
      toLogin: function () {
        this.$router.push('/Login/LoginByPass')
      }
    },
    created () {
      this.$emit('changeTitle', '找回密码')
    }
  }
</script>

<style scoped>

</style>
